<template>
	<view class="filterWrapper">
		<view class="filterItem">
			<text>
				银行
			</text>
			<input type="text"  v-model="MemberCode" placeholder="点击输入银行"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
			<!-- <text>
				银行
			</text>
			<input type="text" placeholder="银行" v-model="MemberCode" /> -->
		</view>
		<view class="filterItem">
			<text>
				银行账户
			</text>
			<input type="text"  v-model="MemberName" placeholder="点击输入银行账户"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(1)">清空</button>
		<!-- 	<text>
				银行账户
			</text>
			<input type="text" placeholder="银行账户" v-model="MemberName" /> -->
		</view>
		<view class="filterItem">
			<text>
				开户人
			</text>
			<input type="text"  v-model="Photo" placeholder="点击输入开户人"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(2)">清空</button>
			<!-- <text>
				开户人
			</text>
			<input type="text" placeholder="开户人" v-model="Photo" /> -->
		</view>
		<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
		 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	export default {
		components: {
			QSpicker,
			xflSelect
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']

				},
				startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				MemberName: "",
				MemberCode: "",
				Phone: "",
				StoreID: "",
				GoodsName: "",
				list: [],
				storeList: [],
				Photo: ""
			};
		},
		created() {
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
		},

		methods: {
			clearFilter(type){
				if(type==0){
					this.MemberCode = "";
				}else if(type==1){
					this.MemberName = "";
				}else{
					this.Photo = "";
				}
			},
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeDate();
				}
			},
			custormInput() {
				console.log(this);
			},
			//修改数据
			changeDate() {
				var pages = getCurrentPages(),
					prevPage = null;
				if (pages.length > 1) {
					prevPage = pages[pages.length - 2];
				}
				var that = this;
				var filter = "";
				if (this.MemberCode != "") {
					filter += "BankName like '%" + this.MemberCode + "%'";
				}
				if (this.MemberName != "") {
					if (filter == "") {
						filter += "BankNo like '%" + this.MemberName + "%'";
					} else {
						filter += " and BankNo like '%" + this.MemberName + "%'";
					}
				}
				if (this.Photo != "") {
					if (filter == "") {
						filter += "OpenMan like '%" + this.Photo + "%'";
					} else {
						filter += " and OpenMan like '%" + this.Photo + "%'";
					}
				}
				let data = {
					SelectAll: 1,
					Filter: filter,
					MemberCode: this.MemberCode,
					MemberName: this.MemberName,
					Photo: this.Phone
				};
				this.$eventHub.$emit('fire', data);
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/bbCss/bbFilter.scss';
	// button::after {
	// 	border: none;
	// 	padding: 0px;
	// }

	// page {
	// 	width: 100%;
	// 	height: 100%;
	// 	background: #ebebeb;
	// }

	// .filterWrapper {
	// 	background: #FFF;
	// 	padding-bottom: 15upx;
	// }

	// .title-padding {
	// 	height: var(--status-bar-height);
	// 	background: $bb-bg-color;
	// 	box-sizing: content-box;
	// }

	// .filterHeader {
	// 	width: 100%;
	// 	height: 50px;
	// 	line-height: 50px;
	// 	position: relative;
	// 	text-align: center;
	// 	background: $bb-bg-color;
	// 	color: #FFF;
	// 	font-size: 18px;
	// 	background-size: 100%;

	// 	.pd {
	// 		display: inline-block;
	// 		position: absolute;
	// 		margin-left: 10px;
	// 		top: 30upx;
	// 		left: 0px;
	// 		font-size: 14px;
	// 		width: 40upx;
	// 		height: 40upx;
	// 		background: url(../../static/back.png) no-repeat;
	// 		background-size: 100%;
	// 	}

	// 	.options {
	// 		position: absolute;
	// 		right: 0px;
	// 		top: 10px;
	// 		width: 80px;
	// 		display: flex;
	// 		text-align: right;

	// 		.setting {
	// 			width: 30px;
	// 			height: 30px;
	// 			background: url(../../static/sureFilter.png) no-repeat;
	// 			background-size: 30px;
	// 			border: none;
	// 			margin-left: 90upx;

	// 		}
	// 	}

	// }

	// .filterItem {
	// 	height: 120upx;
	// 	line-height: 120upx;
	// 	background: #FFF;
	// 	display: flex;
	// 	flex-direction: row;
	// 	box-sizing: border-box;
	// 	padding-left: 30upx;
	// 	padding-right: 30upx;
	// 	font-size: 32upx;
	// 	background: #FFF;

	// 	text {
	// 		flex: 1;

	// 		&:last-child {
	// 			text-align: right;
	// 		}
	// 	}

	// 	input {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 50upx;
	// 		border-bottom: 1px solid #ebebeb;
	// 	}

	// 	view.selectInput {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 22upx;
	// 		border-bottom: 1px solid #ebebeb;

	// 		input {
	// 			flex: 1;
	// 			height: 40upx;
	// 			line-height: 40upx;
	// 			margin-top: 50upx;
	// 			border-bottom: 1px solid #ebebeb;
	// 		}
	// 	}
	// }
</style>
